import {Directive, DoCheck, ElementRef, HostListener, Input, Renderer2} from '@angular/core';
import {pxToRem} from '../functions/px-to-rem';

@Directive({
  selector: '[ngToolsBoxFixed]'
})
export class SizeFixedDirective implements DoCheck {
  private offset;
  private isChanged = false;

  @Input()
  set ngToolsBoxFixed(offset: { x: number; y: number }) {
    this.offset = offset;
    this.isChanged = true;
  }

  @HostListener('window:resize') resize() {
    this.applyChanges();
  }

  constructor(private ngEl: ElementRef, private renderer: Renderer2) {
  }

  ngDoCheck(): void {
    if (this.isChanged) {
      this.isChanged = false;
      this.applyChanges();
    }
  }

  applyChanges() {
    this.renderer.setStyle(this.ngEl.nativeElement, 'width', pxToRem(window.innerWidth - this.offset.x));
    this.renderer.setStyle(this.ngEl.nativeElement, 'height', pxToRem(window.innerHeight - this.offset.y));
  }

}


